<template>
	<div class="page-cooperate">
		<Head navTitle="合作中心" rightText="规则" @rightClick="rightClick"/>
		<div class="page-container ">
			<!-- pc -->
			<div class="pc-show" v-if="windowWidth >1000">
				<el-row :gutter="16">
					<el-col :xs="24" :md="16" :lg="9">
						<div class="bs-panel bs-overflow">
							<div class="bs-data-cells">
								<div class="bs-panel-heading flex-center flex-zBetween">
									<div class="tt">个人资料</div>
									<div @click="dialogVisible = true" class="more">微商规则 <i
											class="iconfont icon-right"></i></div>
								</div>
								<div class="bs-data-grid">
									<div class="val">210,980.00</div>
									<div class="txt">总收益zongshouyi</div>
								</div>
							</div>
							<el-row type="flex" align="middle" class="data-row">
								<el-col :span="12">
									<div class="val">0.00</div>
									<div class="txt">代理返佣dailifanyong</div>
								</el-col>
								<el-col :span="12">
									<div class="val">0.00</div>
									<div class="txt">推广奖励</div>
								</el-col>
							</el-row>
						</div>
						<div class="bs-panel">
							<div class="ws-card-tab flex-center flex-hc">
								<el-tabs class="bs-tab-flex" v-model="activeName">
									<el-tab-pane label="发放记录" name="fatab"></el-tab-pane>
									<el-tab-pane label="财务报表" name="caitab"></el-tab-pane>
								</el-tabs>
								<el-tabs class="bs-tab-flex bs-tab-abs" v-model="inactive"
									v-if="activeName == 'caitab'">
									<el-tab-pane label="本月" name="bmonth"></el-tab-pane>
									<el-tab-pane label="上月" name="smonth"></el-tab-pane>
									<el-tab-pane label="历史" name="hisdate"></el-tab-pane>
								</el-tabs>
							</div>
							<div class="coop-ws-panel" v-if="activeName == 'fatab'">
								<div class="ws-record-list">
									<div class="ws-card flex-center" v-for="item in 5" :key="item">
										<div class="flex_bd">
											<div class="title">代理返佣</div>
											<div class="time">2021-09-10 14:04:00</div>
										</div>
										<div class="ws-info">
											<div class="val">300.00</div>
											<div class="status text-green">发放成功</div>
										</div>
									</div>
								</div>
							</div>
							<div class="coop-ws-panel" v-if="activeName == 'caitab'">
								<!-- 本月 -->
								<div class="pane" v-infinite-scroll="load" infinite-scroll-disabled="disabled"
									v-if="inactive == 'bmonth'">
									<el-table stripe :data="tableData" style="width: 100%">
										<el-table-column align="center" prop="level" label="层级">
										</el-table-column>
										<el-table-column align="center" prop="number" label="人数">
										</el-table-column>
										<el-table-column align="center" prop="income" label="有效收益">
										</el-table-column>
										<el-table-column align="center" prop="angbk" label="代理返佣">
										</el-table-column>
									</el-table>
								</div>
								<!-- 上月 -->
								<div class="pane" v-infinite-scroll="load" infinite-scroll-disabled="disabled"
									v-if="inactive == 'smonth'">
									<el-table stripe :data="tableData" style="width: 100%">
										<el-table-column align="center" prop="level" label="层级">
										</el-table-column>
										<el-table-column align="center" prop="number" label="人数">
										</el-table-column>
										<el-table-column align="center" prop="income" label="有效收益">
										</el-table-column>
										<el-table-column align="center" prop="angbk" label="代理返佣">
										</el-table-column>
									</el-table>
								</div>
								<!-- 历史 -->
								<div class="pane" v-infinite-scroll="load" infinite-scroll-disabled="disabled"
									v-if="inactive == 'hisdate'">
									<div class="col-time-bar">2021-09</div>
									<el-table stripe :data="tableData" style="width: 100%">
										<el-table-column align="center" prop="level" label="层级">
										</el-table-column>
										<el-table-column align="center" prop="number" label="人数">
										</el-table-column>
										<el-table-column align="center" prop="income" label="有效收益">
										</el-table-column>
										<el-table-column align="center" prop="angbk" label="代理返佣">
										</el-table-column>
									</el-table>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :md="8" :lg="6">
						<div class="bs-panel coop-file-panel">
							<div class="coop-file">
								<div class="bs-panel-heading">
									<div class="tt">个人资料</div>
								</div>
								<div class="coop-flex flex-center">
									<div class="coop-avatar flex-center">
										<img src="../../assets/images/touxiang.png"><span>昵称：James</span>
									</div>
									<div class="flex_bd">
										<div class="coop-right">
											<el-button @click="goUrl('/recharge')" type="success">快速充值kuaisuchongxhi</el-button>
											<el-button @click="tVisible = true" type="primary">立即推广lijituiguang</el-button>
										</div>
									</div>
								</div>
							</div>
							<el-row class="data-row">
								<el-col :span="12">
									<div class="val">0</div>
									<div class="txt">线下人数</div>
								</el-col>
								<el-col :span="12">
									<div class="val">11</div>
									<div class="txt">1级总人数</div>
								</el-col>
							</el-row>
						</div>
						<div class="bs-panel">
							<div class="bs-team-body">
								<div class="bs-panel-heading">
									<div class="tt">我的团队</div>
								</div>
								<div class="team-popover">
									<el-popover placement="bottom" width="400" trigger="click">
										<div class="tm-top-dropdown">
											<div class="tm-text">下线人数</div>
											<div class="tm-drop-row">
												<div class="flex_bd">
													<div class="text">1级会员</div>
												</div>
												<div class="tm-value">205</div>
											</div>
											<div class="tm-drop-row">
												<div class="flex_bd">
													<div class="text">1级会员</div>
												</div>
												<div class="tm-value">205</div>
											</div>
											<div class="tm-drop-row">
												<div class="flex_bd">
													<div class="text">1级会员</div>
												</div>
												<div class="tm-value">205</div>
											</div>
										</div>
										<div slot="reference" class="team-list-cell ">
											<div class="val">11</div>
											<div class="text">团队总人数</div>
											<div class="el-icon-arrow-down"></div>
										</div>
									</el-popover>
								</div>
								<div class="team-list">
									<div class="team-list-cell flex-center" v-for="item in 5" :key="item"
										@click="msVisible = true">
										<div class="t-avatar">
											<img src="../../assets/images/default.png">
										</div>
										<div class="flex_bd">
											<div class="t-item">Jane’s 007</div>
											<div class="t-item">Level 1</div>
										</div>
										<div class="time">2021-09-10</div>
										<div class="iconfont icon-right"></div>
									</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :xs="24" :md="24" :lg="9">
						<div class="bs-panel ">
							<div class="ext-tab flex-center flex-hc">
								<el-tabs class="bs-tab-flex" v-model="extactive">
									<el-tab-pane label="推广奖励" name="retab"></el-tab-pane>
									<el-tab-pane label="团队每日数据回报" name="whtab"></el-tab-pane>
								</el-tabs>
							</div>
							<!-- 推广奖励 -->
							<div class="ext-body" v-if="extactive == 'retab'">
								<div class="ext-progress">
									<div class="text">1级线下数</div>
									<div class="ext-progress-bar">
										<el-progress :stroke-width="14" :percentage="16"></el-progress>
									</div>
									<div class="ext-foot flex-center flex-zBetween">
										<div class="text">当前累计进度</div>
										<div class="avl">3/40</div>
									</div>
								</div>
								<div class="ext-list">
									<div class="ext-list-card flex-center" v-for="(item,index) in 6" :key="item">
										<div class="ext-num">{{index+1}}</div>
										<div class="flex_bd">
											<div class="item">累积会员 40</div>
											<div class="item-sm">成功推广 40 有效会员，奖励600.00</div>
										</div>
										<el-button size="small" @click="tVisible = true" type="success">去推广</el-button>
										<!-- <el-button size="small" class="pover" type="success">已领取</el-button> -->
									</div>
								</div>
							</div>
							<!-- 团队每日数据回报 -->
							<div class="ext-team-body" v-if="extactive == 'whtab'">
								<div class="ext-menu flex-center flex-zBetween">
									<div class="ext-menu-box" @click="tmClick('新注册xinzhuce')">
										<img src="../../assets/images/ico1.png">
										<div class="txt">新注册xinzhuce</div>
									</div>
									<div class="ext-menu-box" @click="tmClick('充值xinzhuce')">
										<img src="../../assets/images/ico2.png">
										<div class="txt">充值xinchongzhi</div>
									</div>
									<div class="ext-menu-box" @click="tmClick('提现xinzhuce')">
										<img src="../../assets/images/ico3.png">
										<div class="txt">提现zongtixian</div>
									</div>
									<div class="ext-menu-box" @click="tmClick('总投注xinzhuce')">
										<img src="../../assets/images/ico4.png">
										<div class="txt">总投注zongtouzhu</div>
									</div>
									<div class="ext-menu-box" @click="tmClick('总盈利xinzhuce')">
										<img src="../../assets/images/ico5.png">
										<div class="txt">总盈利zongyingli</div>
									</div>
								</div>
								<div class="thb-panel">
									<div class="thb-grid">
										<div class="tit">{{demoText}}</div>
										<div class="val text-green">+22,660.627.00</div>
									</div>
									<div class="thb-tab flex-center">
										<div class="thb-tab-item" @click="hcur=0" :class="{active:hcur==0}">
											<div class="n">1</div>
											<div class="txt">1级会员</div>
										</div>
										<div class="thb-tab-item" @click="hcur=1" :class="{active:hcur==1}">
											<div class="n">2</div>
											<div class="txt">2级会员</div>
										</div>
										<div class="thb-tab-item" @click="hcur=2" :class="{active:hcur==2}">
											<div class="n">3</div>
											<div class="txt">3级会员</div>
										</div>
									</div>
									<!-- 1级会员 -->
									<div class="thb-pane" v-if="hcur == 0">
										<div class="team-list">
											<div class="team-list-cell">
												<div class="item">210,781.00</div>
											</div>
											<div class="team-list-cell flex-center" v-for="item in 3" :key="item">
												<div class="t-avatar">
													<img src="../../assets/images/default.png">
												</div>
												<div class="flex_bd">
													<div class="t-item">Fane’s 007</div>
													<div class="t-item">Level 1</div>
												</div>
												<div class="time">2021-09-10</div>
											</div>
											<div class="bs-pagination flex-center flex-hc">
												<el-pagination @size-change="handleSizeChange"
													@current-change="handleCurrentChange" :current-page="currentPage4"
													:page-sizes="[10, 20, 30, 40]" :page-size="100"
													layout="prev, pager, next" :total="400">
												</el-pagination>
											</div>
										</div>
									</div>
									<!-- 2级会员 -->
									<div class="thb-pane" v-if="hcur == 1">
										<div class="team-list">
											<div class="team-list-cell">
												<div class="item">310,781.00</div>
											</div>
											<div class="team-list-cell flex-center" v-for="item in 3" :key="item">
												<div class="t-avatar">
													<img src="../../assets/images/default.png">
												</div>
												<div class="flex_bd">
													<div class="t-item">Jane’s 007</div>
													<div class="t-item">Level 1</div>
												</div>
												<div class="time">2021-09-10</div>
											</div>
											<div class="bs-pagination flex-center flex-hc">
												<el-pagination @size-change="handleSizeChange"
													@current-change="handleCurrentChange" :current-page="currentPage4"
													:page-sizes="[10, 20, 30, 40]" :page-size="100"
													layout="prev, pager, next" :total="400">
												</el-pagination>
											</div>
										</div>
									</div>
									<!-- 3级会员 -->
									<div class="thb-pane" v-if="hcur == 2">
										<div class="team-list">
											<div class="team-list-cell">
												<div class="item">410,781.00</div>
											</div>
											<div class="team-list-cell flex-center" v-for="item in 3" :key="item">
												<div class="t-avatar">
													<img src="../../assets/images/default.png">
												</div>
												<div class="flex_bd">
													<div class="t-item">adad’s 007</div>
													<div class="t-item">Level 1</div>
												</div>
												<div class="time">2021-09-10</div>
											</div>
											<div class="bs-pagination flex-center flex-hc">
												<el-pagination @size-change="handleSizeChange"
													@current-change="handleCurrentChange" :current-page="currentPage4"
													:page-sizes="[10, 20, 30, 40]" :page-size="100"
													layout="prev, pager, next" :total="400">
												</el-pagination>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- pc 合作规则 -->
			<el-dialog custom-class="bs-dialog bs-rule-dialog" title="合作规则" :visible.sync="dialogVisible" width="620px">
				<div class="art-body ">
					<p>1、各阶层代理联盟不可在未经AFC体育许可情况下开设双/多个的代理帐号，也不可从AFC体育帐户或相关人士赚取佣金。请谨记任何阶层代理不能用代理帐户下注，AFC体育有权终止并封存帐号及所有在游戏中赚取的佣金。
					</p>
					<p>2、为确保所有AFC体育会员账号隐私与权益，AFC体育不会提供任何会员密码，或会员个人资料。各阶层代理联盟亦不得以任何方式取得会员资料，或任意登入下层会员账号，如发现代理联盟有侵害AFC体育会员隐私行为，AFC体育有权取消代理联盟红利，并取消代理联盟账号。
					</p>
					<p>3、代理联盟旗下的会员不得开设多于一个的帐户。AFC体育有权要求会员提供有效的身份证明以验证会员的身份，并保留以IP判定是否重复会员的权利。如违反上述事项，AFC体育有权终止玩家进行游戏并封存帐号及所有于游戏中赚取的佣金。
					</p>
					<p>4、代理联盟不可为自己或其他联盟下的有效投注会员,只能是公司直属下的有效投注会员,代理每月需有5个下线有效投注（有效投注为每月至少上线5次进行正常投注），如有违反联盟协议sitName有权终止并封存帐号及所有在游戏中赚取的佣金。
					</p>
					<p>5、如代理联盟旗下的会员因为违反条例而被禁止享用AFC体育的游戏，或AFC体育退回存款给会员，AFC体育将不会分配相应的佣金给代理联盟。如代理联盟旗下会员存款用的信用卡、银行资料须经审核，AFC体育保留相关佣金直至审核完成。
					</p>

				</div>
				<div slot="footer" class="dialog-footer">
					<el-button type="success" @click="dialogVisible = false">确 定</el-button>
				</div>
			</el-dialog>
			<!-- pc 团队明细 Jane’s 007明细 -->
			<el-dialog custom-class="bs-dialog bs-ms-dialog" :visible.sync="msVisible" width="620px">
				<div class="ms-heading">
					<div class="item text-green">Jane’s 007明细</div>
					<div class="item-time">2021-09-03 15:09</div>
				</div>
				<div class="ms-cells">
					<div class="ms-cell">
						<div class="ms-label">账号状态</div>
						<div class="ms-val text-green">启用</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">充值</div>
						<div class="ms-val ">0</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">充值次数</div>
						<div class="ms-val ">0</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">提现</div>
						<div class="ms-val ">0</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">有效交易</div>
						<div class="ms-val ">0</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">有效注单</div>
						<div class="ms-val ">0</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">总赢</div>
						<div class="ms-val ">0</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">总输</div>
						<div class="ms-val ">0</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">可用余额</div>
						<div class="ms-val ">0</div>
					</div>
					<div class="ms-cell">
						<div class="ms-label">总盈亏</div>
						<div class="ms-val text-green">0</div>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button type="success" @click="msVisible = false">确 定</el-button>
				</div>
			</el-dialog>
			<!-- pc 推广 -->
			<el-dialog title="立即推广" custom-class="bs-dialog bs-ms-dialog" :visible.sync="tVisible" width="620px">
				<div class="t-panel">
					<div class="t-row flex-center">
						<div class="flex_bd">
							<div class="item">邀请码</div>
							<div class="item">3B9ACA20</div>
						</div>
						<button type="button" class="btn btn-copy" data-clipboard-text="3B9ACA20"
							@click="copy()">复制</button>
					</div>
					<div class="t-row flex-center">
						<div class="flex_bd">
							<div class="item">推广链接</div>
							<div class="item">https://www.pioneer-football.com/</div>
						</div>
						<button type="button" class="btn btn-copy"
							data-clipboard-text="https://www.pioneer-football.com/" @click="copy()">复制</button>
					</div>
					<div class="t-code">
						<img src="../../assets/images/erweima.png">
						<p>长按二维码可保存至相册</p>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button type="info" @click="tVisible = false">取消</el-button>
					<el-button type="success" @click="tVisible = false">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 手机 -->
			<div class="m-show" v-if="windowWidth <=1000">
				<div class="bs-data-cells flex-center flex-column flex-hc">
					<div class="bs-data-grid">
						<div class="val">1,000,342,418.00</div>
						<div class="txt">总收益zongshouyi</div>
					</div>
				</div>
				<el-row type="flex" align="middle" class="data-row data-m-row">
					<el-col :span="12">
						<div class="val">1</div>
						<div class="txt">代理返佣</div>
					</el-col>
					<el-col :span="12">
						<div class="val">0</div>
						<div class="txt">推广奖励</div>
					</el-col>
				</el-row>
				<div class="m-wrapper">
					<div class="m-coop-menu">
						<el-row :gutter="12">
							<el-col :span="12">
								<div class="coop-menu-box" @click="goUrl('/myteam')">
									<div class="icon"><img src="../../assets/images/m_uc1.png"></div>
									<div class="text">我的团队wodetuandui</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="coop-menu-box" @click="goUrl('/caiStaterment')">
									<div class="icon"><img src="../../assets/images/m_uc2.png"></div>
									<div class="text">账务报表zhangwubaobiao</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="coop-menu-box" @click="goUrl('/giveOutRecord')">
									<div class="icon"><img src="../../assets/images/m_uc3.png"></div>
									<div class="text">发放记录fangfajilu</div>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="coop-menu-box" @click="goUrl('/promoCode')">
									<div class="icon"><img src="../../assets/images/m_uc4.png"></div>
									<div class="text">推广码tuiguangma</div>
								</div>
							</el-col>
						</el-row>
					</div>
					<div class="coop-tpanel">
						<div class="tp-head flex-center flex-zBetween">
							<div class="tt">推广奖励</div>
							<el-button @click="goUrl('/reward')" size="small" type="success">前往领取</el-button>
						</div>
						<div class="tpanel-body">
							<div class="coop-tip">团队每日数据回报</div>
							<div class="coop-menu-row">
								<el-row :gutter="0">
									<el-col :span="8">
										<div class="ext-menu-box" @click="goUrl('/reportPage')">
											<img src="../../assets/images/ico1.png">
											<div class="txt ellipsis">新注册xinzhuce</div>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="ext-menu-box" @click="goUrl('/reportPage')">
											<img src="../../assets/images/ico2.png">
											<div class="txt ellipsis">充值xinchongzhi</div>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="ext-menu-box" @click="goUrl('/reportPage')">
											<img src="../../assets/images/ico3.png">
											<div class="txt ellipsis">提现zongtixian</div>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="ext-menu-box" @click="goUrl('/reportPage')">
											<img src="../../assets/images/ico4.png">
											<div class="txt ellipsis">总投注zongtouzhu</div>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="ext-menu-box" @click="goUrl('/reportPage')">
											<img src="../../assets/images/ico5.png">
											<div class="txt ellipsis">总盈利zongyingli</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Clipboard from 'clipboard'
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				hcur: '0',
				activeName: 'fatab',
				extactive: 'retab',
				inactive: 'bmonth',
				tableData: [{
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, ],
				// 弹出
				dialogVisible: false,
				msVisible: false,
				tVisible: false,
				windowWidth: document.documentElement.clientWidth,
				demoText:'新注册',
			};
		},

		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
		},
		methods: {
			copy() {
				var clipboard = new Clipboard('.btn-copy')
				clipboard.on('success', e => {
					console.log(e)
					this.$message({
						message: '复制成功',
						center: true,
						type: 'success',
						duration: 800
					});
					clipboard.destroy()

				})
				clipboard.on('error', e => {
					// 不支持复制
					console.log(e)
					clipboard.destroy()
					// 释放内存
				})
			},
			
			goUrl(url){
				this.$router.push(url);
			},
			rightClick(){
				this.$router.push('/cooprule');
			},
			tmClick(e){
				this.demoText = e
			}
		}
	}
</script>
